<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mobile first web app theme | first</title>
  <meta name="description" content="mobile first, app, web app, responsive, admin dashboard, flat, flat ui">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="js/select2/select2.css">
  <link rel="stylesheet" href="css/plugin.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/style.css">  
  <!--[if lt IE 9]>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/html5.js"></script>
  <![endif]-->
</head>
<body>
  <!-- header -->
  <header id="header" class="navbar">
    <ul class="nav navbar-nav navbar-avatar pull-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">            
          <span class="hidden-xs-only">Mika Sokeil</span>
          <span class="thumb-small avatar inline"><img src="images/avatar.jpg" alt="Mika Sokeil" class="img-circle"></span>
          <b class="caret hidden-xs-only"></b>
        </a>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#"><span class="badge bg-danger pull-right">3</span>Notifications</a></li>
          <li class="divider"></li>
          <li><a href="docs.html">Help</a></li>
          <li><a href="signin.html">Logout</a></li>
        </ul>
      </li>
    </ul>
    <a class="navbar-brand" href="#">first</a>
    <button type="button" class="btn btn-link pull-left nav-toggle visible-xs" data-toggle="class:slide-nav slide-nav-left" data-target="body">
      <i class="fa fa-bars fa-lg text-default"></i>
    </button>
    <ul class="nav navbar-nav hidden-xs">
      <li>
        <div class="m-t m-b-small" id="panel-notifications">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-comment-o fa-fw fa-lg text-default"></i><b class="badge badge-notes bg-danger count-n">2</b></a>
          <section class="dropdown-menu m-l-small m-t-mini">
            <section class="panel panel-large arrow arrow-top">
              <header class="panel-heading bg-white"><span class="h5"><strong>You have <span class="count-n">2</span> notifications</strong></span></header>
              <div class="list-group">
                <a href="#" class="media list-group-item">
                  <span class="pull-left thumb-small"><img src="images/avatar.jpg" alt="John said" class="img-circle"></span>
                  <span class="media-body block m-b-none">
                    Moved to Bootstrap 3.0<br>
                    <small class="text-muted">23 June 13</small>
                  </span>
                </a>
                <a href="#" class="media list-group-item">
                  <span class="media-body block m-b-none">
                    first v.1 (Bootstrap 2.3 based) released<br>
                    <small class="text-muted">19 June 13</small>
                  </span>
                </a>
              </div>
              <footer class="panel-footer text-small">
                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#">See all the notifications</a>
              </footer>
            </section>
          </section>
        </div>
      </li>
      <li><div class="m-t-small"><a class="btn btn-sm btn-info" data-toggle="modal" href="#modal"><i class="fa fa-fw fa-plus"></i> POST</a></div></li>
      <li class="dropdown shift" data-toggle="shift:appendTo" data-target=".nav-primary .nav">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog fa-lg visible-xs visible-xs-inline"></i>Settings <b class="caret hidden-sm-only"></b></a>
        <ul class="dropdown-menu">
          <li>
            <a href="#" data-toggle="class:navbar-fixed" data-target='body'>Navbar 
              <span class="text-active">auto</span>
              <span class="text">fixed</span>
            </a>
          </li>
          <li class="hidden-xs">
            <a href="#" data-toggle="class:nav-vertical" data-target="#nav">Nav 
              <span class="text-active">vertical</span>
              <span class="text">horizontal</span>
            </a>
          </li>
          <li class="divider hidden-xs"></li>
          <li class="dropdown-header">Colors</li>
          <li>
            <a href="#" data-toggle="class:bg bg-black" data-target='.navbar'>Navbar 
              <span class="text-active">white</span>
              <span class="text">inverse</span>
            </a>
          </li>
          <li>
            <a href="#" data-toggle="class:bg-light" data-target='#nav'>Nav 
              <span class="text-active">inverse</span>
              <span class="text">light</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form pull-left shift" action="" data-toggle="shift:appendTo" data-target=".nav-primary">
      <i class="fa fa-search text-muted"></i>
      <input type="text" class="input-sm form-control" placeholder="Search">
    </form>
  </header>
  <!-- / header -->
  <!-- nav -->
  <nav id="nav" class="nav-primary hidden-xs nav-vertical">
    <ul class="nav" data-spy="affix" data-offset-top="50">
      <li><a href="index.html"><i class="fa fa-dashboard fa-lg"></i><span>Dashboard</span></a></li>
      <li class="dropdown-submenu">
        <a href="#"><i class="fa fa-th fa-lg"></i><span>Elements</span></a>
        <ul class="dropdown-menu">
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="icons.html"><b class="badge pull-right">302</b>Icons</a></li>            
          <li><a href="grid.html">Grid</a></li>
          <li><a href="widgets.html"><b class="badge bg-primary pull-right">8</b>Widgets</a></li>
          <li><a href="components.html"><b class="badge pull-right">18</b>Components</a></li>
          <li><a href="portlet.html">Portlet</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="#"><i class="fa fa-list fa-lg"></i><span>Lists</span></a>
        <ul class="dropdown-menu">
          <li><a href="list.html">List groups</a></li>
          <li><a href="table.html">Table</a></li>
        </ul>
      </li>
      <li class="active"><a href="form.html"><i class="fa fa-edit fa-lg"></i><span>Form</span></a></li>
      <li><a href="chart.html"><i class="fa fa-signal fa-lg"></i><span>Chart</span></a></li>
      <li class="dropdown-submenu">
        <a href="#"><i class="fa fa-link fa-lg"></i><span>Others</span></a>
        <ul class="dropdown-menu">
          <li><a href="mail.html">Mail</a></li>
          <li><a href="calendar.html">Fullcalendar</a></li>
          <li><a href="timeline.html">Timeline</a></li>
          <li><a href="profile.html">Profile</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="maps.html">Maps</a></li>
          <li><a href="invoice.html">Invoice</a></li>
          <li><a href="signin.html">Signin page</a></li>
          <li><a href="signup.html">Signup page</a></li>
          <li><a href="404.html">404 page</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <!-- / nav -->
  <section id="content">
    <section class="main padder">
      <div class="clearfix">
        <h4><i class="fa fa-edit"></i>Form</h4>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <section class="panel">
            <div class="panel-body">
              <form class="form-horizontal" method="get" data-validate="parsley">      
                <div class="form-group">
                  <label class="col-lg-3 control-label">Photo</label>
                  <div class="col-lg-9 media">
                    <div class="bg-light pull-left text-center media-large thumb-large"><i class="fa fa-user inline fa fa-light fa fa-3x m-t-large m-b-large"></i></div>
                    <div class="media-body">
                      <input type="file" name="file" title="Change" class="btn btn-sm btn-info m-b-small"><br>
                      <button class="btn btn-sm btn-default">Delete</button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Email</label>
                  <div class="col-lg-8">
                    <input type="text" name="email" placeholder="test@example.com" class="bg-focus form-control" data-required="true" data-type="email">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Password</label>
                  <div class="col-lg-8">
                    <input type="password" name="password" placeholder="Password" class="bg-focus form-control">
                    <div class="line line-dashed m-t-large"></div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Username</label>
                  <div class="col-lg-8">
                    <input type="text" name="username" placeholder="Username" data-required="true" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Account</label>
                  <div class="col-lg-4">
                    <select name="account" class="form-control">
                      <option value="1">Editor</option>
                      <option value="0">Admin</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Registered</label>
                  <div class="col-lg-9">
                    <input type="text" class="combodate form-control" data-format="DD-MM-YYYY" data-template="D  MMM  YYYY" name="datetime" value="21-12-2012">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Profile</label>
                  <div class="col-lg-8">
                    <textarea placeholder="Profile" rows="5" class="form-control" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
                    <div class="checkbox">
                      <label>
                        <input name="agree" type="checkbox"> Agree the <a href="#">terms and policy</a>
                      </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-lg-9 col-lg-offset-3">                      
                    <button type="submit" class="btn btn-white">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </form>
            </div>
          </section>
          <section class="panel"> 
            <div class="wizard clearfix" id="form-wizard">
              <ul class="steps">
                <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1</li>
                <li data-target="#step2"><span class="badge">2</span>Step 2</li>
                <li data-target="#step3"><span class="badge">3</span>Step 3</li>
              </ul>
            </div>
            <div class="step-content">
              <form>
                <div class="step-pane active" id="step1">
                  <p>Your website:</p>             
                  <input type="text" class="input-sm form-control" data-trigger="change" data-required="true" data-type="url" placeholder="website">
                </div>
                <div class="step-pane" id="step2">
                  <p>Your email:</p>             
                  <input type="text" class="input-sm form-control" data-trigger="change" data-required="true" data-type="email" placeholder="email address">
                </div>
                <div class="step-pane" id="step3">This is step 3</div>                
              </form>
              <div class="actions m-t">
                <button type="button" class="btn btn-white btn-sm btn-prev" data-target="#form-wizard" data-wizard="previous" disabled="disabled">Prev</button>
                <button type="button" class="btn btn-white btn-sm btn-next" data-target="#form-wizard" data-wizard="next" data-last="Finish">Next</button>
              </div>
            </div>
          </section>
        </div>
        <div class="col-sm-6">
          <div class="panel">
            <div class="clearfix panel-body">
              <div>
                Radio and Checkbox (Retina display)
              </div>
              <div class="row">
                <div class="col-lg-6">                    
                  <!-- radio -->
                  <div class="radio">
                    <label class="radio-custom">
                      <input type="radio" name="radio" checked="checked">
                      <i class="fa fa-circle-o"></i>
                      Item one checked
                    </label>
                  </div>
                  <div class="radio">
                    <label class="radio-custom">
                      <input type="radio" name="radio">
                      <i class="fa fa-circle-o"></i>
                      Item two
                    </label>
                  </div>
                  <div class="radio">
                    <label class="radio-custom">
                      <input type="radio" name="radio" disabled="disabled">
                      <i class="fa fa-circle-o"></i>
                      Item three disabled
                    </label>
                  </div>
                  <div class="radio">
                    <label class="radio-custom">
                      <input type="radio" checked="checked" disabled="disabled">
                      <i class="fa fa-circle-o"></i>
                      Item four checked disabled
                    </label>
                  </div>
                </div>
                <div class="col-lg-6">
                  <!-- checkbox -->
                  <div class="checkbox">
                    <label class="checkbox-custom">
                      <input type="checkbox" name="checkboxA" checked="checked">
                      <i class="fa fa-check-square-o"></i>
                      Item one checked
                    </label>
                  </div>
                  <div class="checkbox">
                    <label class="checkbox-custom">
                      <input type="checkbox" name="checkboxB" id="2">
                      <i class="fa fa-check-square-o"></i>
                      Item two
                    </label>
                  </div>
                  <div class="checkbox">
                    <label class="checkbox-custom">
                      <input type="checkbox" name="checkboxC" disabled="disabled">
                      <i class="fa fa-check-square-o"></i>
                      Item three disabled
                    </label>
                  </div>
                  <div class="checkbox">
                    <label class="checkbox-custom">
                      <input type="checkbox" name="checkboxD" checked="checked" disabled="disabled">
                      <i class="fa fa-check-square-o"></i>
                      Item four checked disabled
                    </label>
                  </div>
                </div>
              </div>
              <div>
                <p>Combobox</p>
                <div id="myCombobox" class="input-group dropdown combobox m-b">
                  <input class="input-sm form-control" name="combobox" type="text">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-sm btn-white dropdown-toggle" data-toggle="dropdown"><i class="caret"></i></button>
                    <ul class="dropdown-menu pull-right">
                      <li data-value="1" data-selected="true"><a href="#">Item One</a></li>
                      <li data-value="2"><a href="#">Item Two</a></li>
                      <li data-value="3" data-fizz="buzz"><a href="#">Item Three</a></li>
                      <li class="divider"></li>
                      <li data-value="4"><a href="#">Item Four</a></li>
                    </ul>
                  </div>
                </div>
                <p>Select</p>
                <div id="mySelect" class="select btn-group m-b" data-resize="auto">
                  <button type="button" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle">
                    <span class="dropdown-label"></span> <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li data-value="1" data-selected="true"><a href="#">Item One</a></li>
                    <li data-value="2"><a href="#">Item Two</a></li>
                    <li data-value="3" data-fizz="buzz"><a href="#">Item Three</a></li>
                    <li class="divider"></li>
                    <li data-value="4"><a href="#">Item Four</a></li>
                  </ul>
                </div>
                <p>Spinner</p>
                <div id="MySpinner" class="spinner input-group m-b">
                  <input type="text" class="input-sm spinner-input form-control" name="spinner" maxlength="3">
                  <div class="btn-group btn-group-vertical input-group-btn">
                    <button type="button" class="btn btn-white spinner-up">
                      <i class="fa fa-chevron-up"></i>
                    </button>
                    <button type="button" class="btn btn-white spinner-down">
                      <i class="fa fa-chevron-down"></i>
                    </button>
                  </div>
                </div>
                <p>Dropdown select</p>
                <div class="btn-group">
                  <button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
                    <span class="dropdown-label">Option1</span> 
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-select">
                      <li class="active"><a href="#"><input type="radio" name="d-s-r" checked="">Option1</a></li>
                      <li><a href="#"><input type="radio" name="d-s-r">Option2</a></li>
                      <li><a href="#"><input type="radio" name="d-s-r">Option3</a></li>
                      <li class="disabled"><a href="#"><input type="radio" name="d-s-r" disabled="">I'm disabled</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
                    <span class="dropdown-label" data-placeholder="Please select">Please select</span> 
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-select">
                      <li><a href="#"><input type="checkbox" name="d-s-c-1">Option1</a></li>
                      <li><a href="#"><input type="checkbox" name="d-s-c-2">Option2</a></li>
                      <li><a href="#"><input type="checkbox" name="d-s-c-3">Option3</a></li>
                      <li><a href="#"><input type="checkbox" name="d-s-c-4">Option4</a></li>
                      <li><a href="#"><input type="checkbox" name="d-s-c-5">Option5</a></li>
                  </ul>
                </div>
                <div class="input-group m-b m-t">
                    <input type="text" id="appendedInput" class="input-sm form-control">
                    <div class="input-group-btn">
                      <button class="btn btn-white btn-sm dropdown-toggle" data-toggle="dropdown">
                        <span class="dropdown-label">USD</span>  
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu dropdown-select pull-right">
                        <li class="active">
                          <a href="#"><input type="radio" value="USD" name="pay_unit" checked="">USD</a>
                        </li>
                        <li>
                          <a href="#"><input type="radio" value="GBP" name="pay_unit">GBP</a>
                        </li>
                      </ul>
                    </div>
                </div>
                <p>Pillbox</p>
                <div id="MyPillbox" class="pillbox clearfix m-b">
                  <ul>
                    <li class="label bg-default">Item One</li>
                    <li class="label bg-success">Item Two</li>
                    <li class="label bg-warning">Item Three</li>
                    <li class="label bg-danger">Item Four</li>
                    <li class="label bg-info">Item Five</li>
                    <li class="label bg-success">Item Six</li>
                    <li class="label bg-default">Item Seven</li>
                    <input type="text" placeHolder="add a pill">
                  </ul>
                </div>
                <p>Datepicker</p>
                <div class="m-b row">
                  <div class="col-lg-6">
                    <input class="input-sm form-control datepicker" size="16" type="text" value="12-02-2013" data-date-format="dd-mm-yyyy" >
                  </div>
                </div>
                <p>Slider</p>
                <div class="m-b">
                  <input class="slider" type="text" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-selection="after">                  
                </div>
                <p>Select2</p>
                <div class="m-b">
                  <select id="select2-option" style="width:260px">
                      <optgroup label="Alaskan/Hawaiian Time Zone">
                          <option value="AK">Alaska</option>
                          <option value="HI">Hawaii</option>
                      </optgroup>
                      <optgroup label="Pacific Time Zone">
                          <option value="CA">California</option>
                          <option value="NV">Nevada</option>
                          <option value="OR">Oregon</option>
                          <option value="WA">Washington</option>
                      </optgroup>
                      <optgroup label="Mountain Time Zone">
                          <option value="AZ">Arizona</option>
                          <option value="CO">Colorado</option>
                          <option value="ID">Idaho</option>
                          <option value="MT">Montana</option><option value="NE">Nebraska</option>
                          <option value="NM">New Mexico</option>
                          <option value="ND">North Dakota</option>
                          <option value="UT">Utah</option>
                          <option value="WY">Wyoming</option>
                      </optgroup>
                      <optgroup label="Central Time Zone">
                          <option value="AL">Alabama</option>
                          <option value="AR">Arkansas</option>
                          <option value="IL">Illinois</option>
                          <option value="IA">Iowa</option>
                          <option value="KS">Kansas</option>
                          <option value="KY">Kentucky</option>
                          <option value="LA">Louisiana</option>
                          <option value="MN">Minnesota</option>
                          <option value="MS">Mississippi</option>
                          <option value="MO">Missouri</option>
                          <option value="OK">Oklahoma</option>
                          <option value="SD">South Dakota</option>
                          <option value="TX">Texas</option>
                          <option value="TN">Tennessee</option>
                          <option value="WI">Wisconsin</option>
                      </optgroup>
                      <optgroup label="Eastern Time Zone">
                          <option value="CT">Connecticut</option>
                          <option value="DE">Delaware</option>
                          <option value="FL">Florida</option>
                          <option value="GA">Georgia</option>
                          <option value="IN">Indiana</option>
                          <option value="ME">Maine</option>
                          <option value="MD">Maryland</option>
                          <option value="MA">Massachusetts</option>
                          <option value="MI">Michigan</option>
                          <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
                          <option value="NY">New York</option>
                          <option value="NC">North Carolina</option>
                          <option value="OH">Ohio</option>
                          <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
                          <option value="VT">Vermont</option><option value="VA">Virginia</option>
                          <option value="WV">West Virginia</option>
                      </optgroup>
                  </select>
                </div>
                <div class="m-b">
                  <input type="hidden" id="select2-tags" style="width:260px" value="brown"/>
                </div>
                <div class="dropfile visible-lg m-t block">
                  <small>Drag and Drop file here</small>
                </div>                
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </section>
  <!-- footer -->
  <footer id="footer">
    <div class="text-center padder clearfix">
      <p>
        <small>&copy; first 2013, Mobile first web app framework base on Bootstrap</small><br><br>
        <a href="#" class="btn btn-xs btn-circle btn-twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="btn btn-xs btn-circle btn-facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="btn btn-xs btn-circle btn-gplus"><i class="fa fa-google-plus"></i></a>
      </p>
    </div>
  </footer>
  <!-- / footer -->
	<script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- app -->
  <script src="js/app.js"></script>
  <script src="js/app.plugin.js"></script>
  <script src="js/app.data.js"></script>
  <!-- fuelux -->
  <script src="js/fuelux/fuelux.js"></script>
  <!-- datepicker -->
  <script src="js/datepicker/bootstrap-datepicker.js"></script>
  <!-- slider -->
  <script src="js/slider/bootstrap-slider.js"></script>
  <!-- file input -->  
  <script src="js/file-input/bootstrap.file-input.js"></script>
  <!-- combodate -->
  <script src="js/combodate/moment.min.js"></script>
  <script src="js/combodate/combodate.js"></script>
  <!-- parsley -->
  <script src="js/parsley/parsley.min.js"></script>
  <!-- select2 -->
  <script src="js/select2/select2.min.js"></script>
</body>
</html>